<script setup lang="ts">
import { ref, reactive, h, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
const openKeys = ref<string[]>();
const router = useRouter();
const route = useRoute();
import {
    HomeOutlined,
    SettingOutlined,
    RocketOutlined,
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    ExpandOutlined,
    ReloadOutlined,
    SearchOutlined,
    AppleOutlined,
    FullscreenExitOutlined,
} from "@ant-design/icons-vue";
import type { MenuProps } from "ant-design-vue";
const selectedKeys = ref<string[]>(["1"]);
let F11_flag = ref(true);
const inputRef = ref();
const load = () => {
    window.location.reload();
};
const F = () => {
    const element: any = document.getElementById("box");
    F11_flag.value = !F11_flag.value;
    if (F11_flag.value) {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        }
    } else {
        if (element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) {
            element.webkitRequestFullscreen();
        } else if (element.msRequestFullscreen) {
            element.msRequestFullscreen();
        }
    }
};
let state = reactive({
    tags: ["首页"],
    inputVisible: false,
    inputValue: "",
    collapsed: false,
    selectedKeys: ["1"],
    openKeys: ["sub1"],
    preOpenKeys: ["sub1"],
});

const handleClose = (removedTag: string) => {
    const tags = state.tags.filter((tag) => tag !== removedTag);
    state.tags = tags;
};

const handleInputConfirm = () => {
    const inputValue = state.inputValue;
    let tags = state.tags;
    if (inputValue && tags.indexOf(inputValue) === -1) {
        tags = [...tags, inputValue];
    }
    // console.log(tags);
    Object.assign(state, {
        tags,
        inputVisible: false,
        inputValue: "",
    });
};

const items = reactive([
    {
        key: "/home/index",
        icon: () => h(HomeOutlined),
        label: "首页",
        title: "首页",
    },
    {
        key: "",
        icon: () => h(SettingOutlined),
        label: "大屏管理",
        title: "大屏管理",
        children: [
            {
                key: "/home/gatajob",
                label: "就业态势",
                title: "就业态势",
            },
            {
                key: "/home/detection",
                label: "智能检测",
                title: "智能检测",
            },
            {
                key: "/home/security",
                label: "安防管理",
                title: "安防管理",
            },
            {
                key: "/home/operation",
                label: "设备运维",
                title: "设备运维",
            },
        ],
    },
    {
        key: "",
        icon: () => h(RocketOutlined),
        label: "知识点",
        title: "知识点",
        children: [
            {
                key: "/keepalive",
                label: "keepalive",
                title: "keepalive",
            },
        ],
    },
]);
watch(
    () => state.openKeys,
    (_val, oldVal) => {
        state.preOpenKeys = oldVal;
    }
);

const handleClick: MenuProps["onClick"] = (e: any) => {
    console.log(e);

    router.push(e.key);
    if (state.tags.indexOf(e.item.title) == -1) {
        state.tags.push(e.item.title)
    }
}


//收起左侧菜单
const toggleCollapsed = () => {
    state.collapsed = !state.collapsed;
    state.openKeys = state.collapsed ? [] : state.preOpenKeys;
};
const open = ref<boolean>(false);

const showDrawer = () => {
    open.value = true;
};
</script>
<template>
    <div style="height: 100vh; width: 100vw" id="box">
        <a-layout style="height: 100vh; width: 100vw">
            <a-layout-sider v-model:collapsed="state.collapsed" :trigger="null" style="background: #fff" collapsible>
                <div style="
            line-height: 50px;
            display: flex;
            justify-content: space-evenly;
          ">
                    <div><img src="../assets/logo.png" alt="" style="width: 40px" /></div>
                    <div v-if="state.collapsed"></div>
                    <div style="font-size: 20px" v-else>BIG CUTE</div>
                </div>
                <a-menu v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys" mode="inline" :items="items"
                    @click="handleClick"></a-menu>
            </a-layout-sider>
            <a-layout>
                <a-layout-header class="header" style="
            background: #fff;
            height: 50px;
            line-height: 50px;
            padding: 0 20px;
            display: flex;
          ">
                    <a-button type="primary" style="margin-top: 10px; background: #fff; color: #000"
                        @click="toggleCollapsed">
                        <MenuUnfoldOutlined v-if="state.collapsed"
                            style="border: none; background: #fff; color: #000" />
                        <MenuFoldOutlined v-else style="border: none; background: #fff; color: #000" />
                    </a-button>
                    <div style="height: 50px; flex: 1; margin-left: 10px">
                        <div style="display: flex">
                            <a-breadcrumb style="margin: 16px 0">
                                <a-breadcrumb-item v-for="(item, index) in route.matched" :key="index">{{ item.name
                                    }}</a-breadcrumb-item>
                            </a-breadcrumb>
                        </div>
                    </div>
                    <div style="
              width: 300px;
              display: flex;
              font-weight: 100;
              justify-content: space-evenly;
            ">
                        <div style="
                display: flex;
                width: 100px;
                height: 100%;
                align-items: center;
                justify-content: space-evenly;
              ">
                            <SearchOutlined style="font-size: 20px" />
                            <ReloadOutlined style="font-size: 18px" @click="load" />
                            <AppleOutlined style="font-size: 20px" />
                        </div>
                        <div style="
                width: 200px;
                display: flex;
                height: 100%;
                align-items: center;
                justify-content: space-evenly;
              ">
                            <ExpandOutlined style="font-size: 20px" @click="F" v-if="F11_flag" />
                            <FullscreenExitOutlined style="font-size: 20px" v-else @click="F" />
                            <div>
                                <img src="../assets/avatar.jpg" style="width: 35px; height: 35px; border-radius: 50%" />
                            </div>
                            <div style="font-size: 18px">BIG CUTE</div>
                        </div>

                        <SettingOutlined style="font-size: 20px; line-height: 50px" @click="showDrawer" />
                    </div>
                </a-layout-header>
                <div style="
            background-color: #fff;
            border-radius: 5px;
            margin-top: 15px;
            margin-left: 15px;
            line-height: 40px;
          ">
                    <template v-for="(tag, index) in state.tags" :key="tag">
                        <a-tooltip v-if="tag.length" :title="tag">
                            <a-tag :closable="index !== 0" @close="handleClose(tag)">
                                {{ `${tag.slice(0, 20)}` }}
                            </a-tag>
                        </a-tooltip>
                        <a-tag v-else :closable="index !== 0" @close="handleClose(tag)">
                            {{ tag }}
                        </a-tag>
                    </template>
                    <a-input v-if="state.inputVisible" ref="inputRef" v-model:value="state.inputValue" type="text"
                        size="small" :style="{ width: '78px' }" @blur="handleInputConfirm"
                        @keyup.enter="handleInputConfirm" />
                </div>
                <a-layout-content :style="{
                margin: '15px 15px',
                background: '#F5F5F5',
                width: '100%',
            }">
                    <router-view />
                </a-layout-content>
            </a-layout>
        </a-layout>
        <a-drawer v-model:open="open" class="custom-class" root-class-name="root-class-name"
            :root-style="{ color: 'blue' }" style="color: red" title="布局设置" placement="right">
        </a-drawer>
    </div>
</template>



<style scoped>
#components-layout-demo-top-side-2 .logo {
    float: left;
    width: 120px;
    height: 31px;
    margin: 10px;
    background: rgba(255, 255, 255, 0.3);
}

.ant-row-rtl #components-layout-demo-top-side-2 .logo {
    float: right;
    margin: 10px;
}

.site-layout-background {
    background: #fff;
}

.ant-tag {
    height: 30px;
    line-height: 30px;
    border: 1px solid red;
    color: blue;
}
</style>
